
<template>
    <div class="login">
        <vue-particles
                class="login-bg"
                color='#39AFFD'
                :particleOpacity="0.7"
                :particlesNumber="100"
                shapeType="circle"
                :particleSize="4"
                linesColor="#8DD1FE"
                :linesWidth="1"
                :lineLinked="true"
                :lineOpacity="0.4"
                :linesDistance="150"
                :moveSpeed="3"
                :hoverEffect="true"
                hoverMode="grab"
                :clickEffect="true"
                clickMode="push"
        >
        </vue-particles>
<!--        登录页面-->
        <div class="login-box">
            <div class="login-box-from">
                <el-form ref="loginForm" :model="user" :rules="rules" status-icon label-width="80px">
                    <h3><span>登录</span></h3>
                    <hr>
                    <el-form-item prop="user_login" label="用户名">
                        <el-input v-model="user.user_login" placeholder="请输入用户名" prefix-icon></el-input>
                    </el-form-item>
                    <el-form-item id="password" prop="password" label="密码" >
                        <el-input v-model="user.password" show-password placeholder="请输入密码"></el-input>
                    </el-form-item>

                    <el-form-item style="padding-right: 96px;margin-top: 30px;">
                        <el-button type="primary" icon="el-icon-upload" @click="doLogin()">登 录</el-button>
                    </el-form-item>
                    <router-link to="/PassWordNew">已有帐号，忘记密码？</router-link>
                    |
                    <router-link to="/Register" style="padding-left: 10px;">没有帐号？点此注册！</router-link>

                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
    import { login } from "@/api/api.js";
    import {loginRule,passRule} from "@/utils/validateFrom";
    import {getToken, setToken} from "@/utils/token";
    export default {
        name: "Login",
        data() {
            return {
                user: {
                    user_login: "",
                    password: ""
                },
                rules:{
                    user_login: [{ validator: loginRule,min:2,max:16,required: true,trigger: 'blur'}],
                    password: [{ validator: passRule,min:4,max:16,required: true,trigger: 'blur'}],
                }
            };
        },

        methods: {
            doLogin() {

                this.$refs.loginForm.validate((valid)=>{
                    if (valid){
                        // 去空格后在进行加密
                        // console.log("this.user.password",this.md5(this.user.password.replace(/\s*/g,'')));
                        this.user.password = this.md5(this.user.password.replace(/\s*/g,''));
                        login(this.user).then(res =>{
                          //   // console.log('res',res)
                          //   this.$store.dispatch('menus/menuAll', this.user.user_login)
                          //   setToken("token",res.data.access_token);
                          //   this.$message({type:'success', message:'登录成功'});
                          // // 跳转页面
                          // this.$router.push({name:'users'});
                          //   // alert(res.msg);
                          // // console.log('this.user',this.user);
                          // console.log('res',res);
                          // // 成功登录后获取菜单数据
                          // this.$store.dispatch('menus/menuAll', this.user.user_login)
                          //     .then(() => {
                          //
                          //       // 获取菜单数据成功后再进行一些操作，例如跳转页面
                          //       setToken("token",res.data.access_token);
                          //       this.$message({type:'success', message:'登录成功'});
                          //       this.$router.push({name:'users'});
                          //     })
                          //     .catch(error => {
                          //       // 获取菜单数据失败
                          //       // this.$message({type:'error', message:error.message || 'Error'});
                          //       this.$message({type:'error', message:'登录失败'});
                          //     });
                          if (res.code === 200){
                            // this.$store.dispatch('menus/menuAll', this.user.user_login)
                            // 获取菜单数据成功后再进行一些操作，例如跳转页面
                            setToken("token",res.data.access_token);
                            this.$message({type:'success', message:'登录成功'});
                            this.$router.push({name:'home'});
                          }else{
                            this.$message({type:'error', message:res.message || 'Error'});
                          }




                        }).catch(error =>{
                            // console.error('error',error)
                            // alert(error.message || 'Error')
                            this.$message({type:'error', message:error.message || 'Error'});
                            // 刷新当前页面
                            // this.$router.go(0)
                        })
                    }else{
                        // console.error("登录失败")
                      this.$message({
                        type:'error',
                        message:"登录失败"
                      });
                        // alert('登录失败');
                        //
                    }
                })
                // if (!this.user.user_login) {
                //     this.$message.error("请输入用户名！");
                //     return;
                // } else if (!this.user.password) {
                //     this.$message.error("请输入密码！");
                //     return;
                // } else {
                //     //校验用户名和密码是否正确;
                //     // this.$router.push({ path: "/personal" });
                //     axios
                //         .post("/login/", {
                //             name: this.user.user_login,
                //             password: this.user.password
                //         })
                //         .then(res => {
                //             // console.log("输出response.data.status", res.data.status);
                //             if (res.data.status === 200) {
                //                 this.$router.push({ path: "/personal" });
                //             } else {
                //                 alert("您输入的用户名或密码错误！");
                //             }
                //         });
                // }
            }
        },
        created() {
          const hasToken = getToken("token");
          if (hasToken) {
            this.$router.push({ path: "/home" });
          }
        },
        mounted() {
          // console.log('login',this.$store);
        }
    };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    /*<!--  将下面 login-bg 这个给解除了，就会出现黑色的粒子特效  -->*/
    /*    .login-bg{*/
    /*        width: 100%;*/
    /*        height: 100%;*/
    /*        background: #3E3E3E;*/
    /*    }*/
    .login-box-from{
        width: 100%;
        height: 100%;
        padding: 30px;
        box-sizing: border-box;
    }
    .login-box{
        width: 400px;
        /*height: 287px;*/
        background: hsla(0,0%,100%,.3);
        border-radius: 5px;
        box-shadow: 0 0 2px #f7f7f7;
        border: 1px solid #f7f7f7;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -225px;
        margin-top: -150px;

    }
    .login {
        width: 100%;
        height: 100%;
        /*background: url("../assets/images/OIP-C.png") no-repeat;*/
        background-size: cover;
        overflow: hidden;
    }
    #password {
        margin-bottom: 5px;
    }
    h3 {
        color: #0babeab8;
        font-size: 24px;
    }
    hr {
        background-color: #444;
        margin: 20px auto;
    }
    a {
        text-decoration: none;
        color: #aaa;
        font-size: 15px;
    }
    a:hover {
        color: coral;
    }
</style>